<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="Access-Control-Allow-Origin" content="">
		<meta http-equiv="content-security-policy">
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<div style="width: 200px; height: 200px; margin: 100px auto 0;">
			<img src="photo.jpg" width="200px" height="200px" style="border-radius: 100px;">
		</div>


		<div style="margin: 0 auto; width: 90%;">
			<input id="id" type="text" placeholder="请输入账号" style="margin-bottom: 0; margin-top: 50px; border: none;" />
			<div id="id_line" style="height: 2px; background-color: green; margin: 0 auto; width: 0;" />
		</div>

		<div>
			<input id="name" type="text" placeholder="请输入密码"
				style="margin-bottom: 0; margin-top: 20px; border: none;" />
			<div id="name_line" style="height: 2px; background-color: green; margin: 0 auto; width: 0;" />
		</div>

		<div style="width: 100%; margin: 0 auto;">
			<button id="submit" type="button"
				style="background-color: #2AC845; color: whitesmoke; width: 100%; margin-top: 20px; padding: 10px 0;">登录</button>
		</div>

		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				var id_txt = document.getElementById("id");
				var id_lien = document.getElementById("id_line");

				var name_txt = document.getElementById("name");
				var name_line = document.getElementById("name_line");

				function addFocusEventListener(ele, ele_line) {
					ele.addEventListener("focus", function() {
						var timer = setInterval(function() {
							var cur = parseInt(ele_line.style.width);
							if (cur == 100) clearInterval(timer);
							else ele_line.style.width = (cur + 5).toString() + "%";
						}, 10);
					});

					ele.addEventListener("blur", function() {
						ele_line.style.width = "0";
					});
				}

				addFocusEventListener(id_txt, id_lien);
				addFocusEventListener(name_txt, name_line);

				var submit = document.getElementById("submit");
				submit.addEventListener("tap", function() {
					if (id_txt.value == "") {
						id_txt.focus();
						return;
					} else if (name_txt.value == "") {
						name_txt.focus();
						name_txt.setSelectionRange(0 , 0);
						return;
					}

					mui.ajax(app.serverAddress + "/u/l", {
						data: {
							id: id_txt.value,
							password: name_txt.value,
							cid: plus.push.getClientInfo().clientid
						},
						dataType: 'jsonp',
						jsonp: "callback",
						type: 'post',
						timeout: 10000,
						headers: {
							'Content-Type': 'application/json'
						},
						success: function(data) {
							var o = JSON.parse(data);
							if (o.status == 200) {
								app.setGlobalUserInfo(o.object);
								fetch(app.getFaceThumbnailUrl(o.object.id, 100, 100)).then(function (response) {
									if (response.ok) {
										return response.blob();
									}
									throw new Error('some error happened!');
								}).then(function (oBlob) {
									var reader = new FileReader({
										onload: () => plus.storage.setItem(o.object.id.toString(), this.result)
									});
									reader.readAsDataURL(oBlob);
								}).catch((err) => {
									console.log("ERROR:" + JSON.stringify(err));
								});
								
								mui.openWindow("index.html");
							} else {
								alert("User is not registered!");
							}
						},
						error: function(xhr, type, errorThrown) {
							alert("some error happened!" + JSON.stringify(errorThrown));
						}
					})
				});
			});
		</script>
	</body>

</html>
